<script>
import * as echarts from 'echarts'

let chargingStationAnalysisEcharts = null
export default {
  name: 'ChargingStationAnalysis',
  props: {
    queryForm: {
      type: Object,
      required: true,
      default: {}
    },
    projectList: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    queryForm: {
      async handler(val) {
        if (val.sceneProjectId != null) {
          const param = {
            sceneProjectId: val.sceneProjectId,
            startDate: val.startTime,
            endDate: val.endTime
          }
          if (val.roomInfo != null && val.roomInfo.length > 0) {
            param.sceneEdificeId = val.roomInfo[0]
            if (val.roomInfo.length > 1) {
              param.sceneFloorId = val.roomInfo[1]
            }
            if (val.roomInfo.length > 2) {
              param.sceneRoomId = val.roomInfo[2]
            }
          }
          const res = await this.$api.userEnergyOptimizationSuggestions.chargingStationAnalysis(param)
          this.startTime = res.data.startDate
          this.endTime = res.data.endDate
          this.dateList = res.data.dateList
          this.values1 = res.data.values1
          this.values2 = res.data.values2
          this.values3 = res.data.values3
          this.values4 = res.data.values4
          this.values5 = res.data.values5
          this.initEcharts()
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      dateList: [],
      values1: [],
      values2: [],
      values3: [],
      values4: [],
      values5: []
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryForm.sceneProjectId == null || project.value === this.queryForm.sceneProjectId)
        .map(project => project.label).join('，')
    }
  },
  methods: {
    getValueMax(valueList) {
      if (valueList.length > 0) {
        const index = valueList.findIndex((value, index, arr) => {
          return value === Math.max.apply(Math, arr)
        })
        return {
          date: this.dateList[index],
          value: valueList[index]
        }
      }
      return {}
    },
    getValueMin(valueList) {
      if (valueList.length > 0) {
        const index = valueList.findIndex((value, index, arr) => {
          return value === Math.min.apply(Math, arr)
        })
        return {
          date: this.dateList[index],
          value: valueList[index]
        }
      }
      return {}
    },
    initEcharts() {
      this.disposeEcharts()
      this.$nextTick(() => {
        chargingStationAnalysisEcharts = echarts.init(document.getElementById('chargingStationAnalysisEcharts'))
        chargingStationAnalysisEcharts.setOption({
          title: {
            text: '充电桩使用情况（kwh）'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['充电桩充电量', '充电桩放电量']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.dateList
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '充电桩充电量',
              type: 'line',
              stack: 'Total',
              data: this.values1
            },
            {
              name: '充电桩放电量',
              type: 'line',
              stack: 'Total',
              data: this.values1
            }
          ]
        })
      })
    },
    disposeEcharts() {
      if (chargingStationAnalysisEcharts != null) {
        chargingStationAnalysisEcharts.dispose()
        chargingStationAnalysisEcharts = null
      }
    }
  },
  destroyed() {
    this.disposeEcharts()
  }
}
</script>

<template>
  <div>
    <h2>06、充电桩情况分析</h2>
    <div class="category-box">
      <div class="content">
        <div id="chargingStationAnalysisEcharts" style="width: 60%;height: 320px;margin: 0 10%"></div>
        <table>
          <thead>
          <tr>
            <th>数据时间</th>
            <th>充电桩充电量(kwh）</th>
            <th>充电桩放电量(kwh）</th>
            <th>充电次数</th>
            <th>放电次数</th>
            <th>充电桩利用率</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in dateList">
            <td>{{ item }}</td>
            <td>{{ values1[index] }}</td>
            <td>{{ values2[index] }}</td>
            <td>{{ values3[index] }}</td>
            <td>{{ values4[index] }} %</td>
            <td>{{ values5[index] }} %</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            展示和分析在时间段内充电桩充电量以及放电量，帮助用户了解充电桩系统的运行状况和趋势。{{ getProjectNames }}在
            {{ startTime }}- {{ endTime }}中，
            充电桩充电总量为{{ values1.reduce((a, b) => a + b, 0) }}kwh，其中{{ getValueMax(this.values1).date
            }}充电桩充电量最高，为 {{ getValueMax(this.values1).value
            }} kwh;{{ getValueMin(this.values1).date }}充电桩充电量最低，为 {{ getValueMin(this.values1).value }}kwh。
            充电桩发电总量为{{ values2.reduce((a, b) => a + b, 0) }}kwh，其中{{ getValueMax(this.values2).date
            }}的充电桩放电量最高，为 {{ getValueMax(this.values1).value }}kwh;
            {{ getValueMin(this.values2).date }}充电桩放电量最低，为 {{ getValueMin(this.values2).value }}kwh。
            充电总次数为{{ values3.reduce((a, b) => a + b, 0) }}次，其中{{ getValueMax(this.values3).date }}的充电次数最高，为
            {{ getValueMax(this.values3).value }}次;
            {{ getValueMin(this.values3).date }}充电次数最低，为 {{ getValueMin(this.values3).value }}次。
            放电总次数为{{ values4.reduce((a, b) => a + b, 0) }}次，其中{{ getValueMax(this.values4).date }}的放电次数最高，为
            {{ getValueMax(this.values4).value }}次；
            {{ getValueMin(this.values4).date }}放电次数最低，为 {{ getValueMin(this.values4).value }}次。
            {{ getValueMax(this.values5).date }}的充电桩利用率最高，为 {{ getValueMax(this.values5).value }}%;
            {{ getValueMin(this.values5).date }}充电桩利用率最低，为 {{ getValueMin(this.values5).value }}%。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-box, .elevator-box, .charging-box {
  padding: 0 5%;

  table {
    border-collapse: collapse;
    width: 60%;
    margin: 0 10%;
    font-size: 16px;
    font-weight: 500;

    th {
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 6px 10px;
      background-color: rgb(2, 149, 144);
      text-align: center;
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: center;
    }
  }

  .content {
    padding: 0 5%;

    p {
      text-indent: 2em;
      line-height: 28px;
    }
  }
}
</style>
